<template>
	<!-- 顶部 -->
	<el-hander>
		<el-row>
			<el-col :span="24">

			</el-col>
		</el-row>
	</el-hander>
	<!-- 主页 -->
	<el-main>
		<el-card>
			<el-row>
				<el-col :span="18">
					<!-- 发帖人信息 -->
					<el-card>
						<!-- 表格 -->
						<div>
							<el-button type="text">
								<!--   头像 -->

								<div class="demo-type" style="margin-top: 20px;">
									<a href="/pagesIndex/yongHu">
										<el-avatar :size="30" src="https://empty" @error="errorHandler">
											<img :src="user_img">
										</el-avatar>
									</a>
								</div>
							</el-button>

							<div style="margin-top:-30px;margin-left:35px; height: 5px;">
								<el-button type="text">{{music.music_author}}-{{music.music_name}} </el-button>
							</div>
							<div style="margin-top:20px;margin-left:35px;">
								<!-- 用户名 -->
								{{user_name}}
							</div>
						</div>
						<div style="color:aliceblue;
			       margin-top:-30px;margin-left:760px;height:20px;width:40px
			       text-align: center;
										color: #88B9F9;
										">
							<svg style="margin-left: -80px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
								fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
								<path
									d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
							</svg>
							{{music.music_tu}}
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
								class="bi bi-star" viewBox="0 0 16 16">
								<path
									d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
							</svg>
							{{music.music_sc}}
						</div>
					</el-card>
					<!-- 音乐播放 -->

					<el-card>
						<!-- 播放器 -->
						<el-row>
							<el-col :span="24">
								<a-player :audio="audio" :volume="volume"></a-player>

							</el-col>
						</el-row>
						<!-- 点赞、评论、收藏、下载-->
						<el-row>
							<el-col :span="6" style="text-align: center;">
								<!-- 点赞按钮 -->
								<el-button-group>
									<el-button @click="like">
										<el-icon>
											<Check v-if="!likeIcon" />
											<CircleCheckFilled v-else />
										</el-icon>
										{{likeIcon?'已点赞':'点赞'}}
									</el-button>
									<el-button>
										{{controls.like}}
									</el-button>
								</el-button-group>
							</el-col>
							<el-col :span="6" style="text-align: center;">
								<!-- 评论按钮 -->
								<el-button-group>
									<el-button plain @click="isShow">
										<el-icon>
											<ChatDotRound />
										</el-icon>
										评论
									</el-button>
									<el-dialog v-model="getComment" title="评论" width="500" :before-close="handleClose"
										class="test">
										<div class="common-layout">
											<el-container>
												<el-main style="text-align: right;">
													<el-input v-model="comments.comments_main" maxlength="200"
														show-word-limit type="textarea" placeholder="请输入内容" />
													<el-button type="primary" @click="submit">
														评论
													</el-button>
												</el-main>
											</el-container>
										</div>
									</el-dialog>
									<el-button>
										{{controls.comment}}
									</el-button>
								</el-button-group>
							</el-col>
							<el-col :span="6" style="text-align: center;">
								<!-- 收藏按钮 -->
								<el-button-group>
									<el-button @click="collection">
										<el-icon>
											<Star v-if="!collectionIcon" />
											<StarFilled v-else />
										</el-icon>
										{{collectionIcon?'已收藏':'收藏'}}
									</el-button>
									<el-button>
										{{controls.collection}}
									</el-button>
								</el-button-group>
							</el-col>
							<el-col :span="6" style="text-align: center;">
								<!-- 下载按钮 -->
								<el-button-group>
									<el-button @click="download">
										<el-icon>
											<Download />
										</el-icon>
										下载
									</el-button>
									<el-button>
										<div></div>
									</el-button>
								</el-button-group>
							</el-col>
						</el-row>
					</el-card>
					<!-- 歌词 -->
					<el-card>
						<h3>歌词展示</h3>
						<el-row>
							<el-col :span="24" style="text-align: center;white-space: pre-line;">
								{{lrc}}
							</el-col>
						</el-row>
					</el-card>
					<!-- 评论 -->
					<el-card>
						<!-- 每条评论 -->
						<h3>精彩评论</h3>
						<div v-for="data in comment" :key="data" class="comment-item">
							<ping-lun :comments_main="data.comments_main" :comments_tu=data.comments_tu
								:comments_date="data.comments_date" :user_name="data.user_name" :user_tx="data.user_tx"
								:comments_id="data.comments_id" :num="commentIcon">
							</ping-lun>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6" style="margin-left: 0px;">
					<div style="background-color: aqua;width: 300px;height: 300px;">
						<img src="../../assets/gg.png" style="height: 300px;width: 300px;">
					</div>
					<!--  广告栏 -->
					<div style="width: 300px;height:190px;margin-bottom: 10px;background-color: white;">
						<div style="margin-left: 10px;height: 10px;"></div>
						<div
							style="width: 240px;margin-left: 30px;background-color: #312A2A;height: 70px; border-radius: 15px;">
							<div style="height: 16px;width: 240px;"></div>
							<div style="color:#E2C2B9;margin-left: 20px;">
								黑胶vip</div>
							<div style="color:#E2C2B9;margin-left: 120px;margin-top: -20px;">

								<el-popover placement="right" :width="400" trigger="click">
									<template style="height: 500px;width:500px;" #reference>
										<el-button
											style="background-color:#E2C2B9;height:26px;width: 70px;margin-left: 20px;"
											round>优惠购买</el-button>
									</template>
									<el-row>
										<el-col :span="10">
											<img src="../../assets/gg.png" style="width: 200px;height: 200px;">
										</el-col>
										<el-col :span="6">

										</el-col>
										<el-col :span="4">
											<div>588/1年</div>
										</el-col>
									</el-row>

								</el-popover>

							</div>
							<div style="color: #E2C2B9;font-size: 12px;
					margin-left: 20px;">立享21项特权</div>
						</div>
						<div style="height: 16px;width: 240px;margin-top: 20px;
				  margin-left: 30px;
				  color: #666666;font-size: 14px">
							登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
						</div>
						<p style="height: 10px;"></p>
						<hr />
						<div style="height: 16px;width: 240px;margin-top: 20px;
						margin-left: 30px;
						color: #666666;font-size: 14px">
							<el-button @click="authorMessage">
								歌手信息
							</el-button>
							<el-button @click="authorMessage">
								{{music.music_author}}
							</el-button>
						</div>
					</div>

				</el-col>
			</el-row>
		</el-card>
	</el-main>
</template>

<script setup>
	// ----------------------导入组件栏-------------------------
	import axios from 'axios';
	import APlayer from './APlayer.vue'
	import * as ElementPlusIconsVue from '@element-plus/icons-vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import {
		use
	} from 'echarts'
	import PingLun from './PingLun.vue'
	// ------------------------用户信息-------------------------
	let user_id = -1
	// 获取用户ID
	try {
		user_id = JSON.parse(localStorage.getItem('user')).user_id
	} catch (e) {}
	// 参数获取并解码函数
	function getUrlParameter(sParam) {
		// 获取 URL 中的查询字符串部分
		const sPageURL = window.location.search.substring(1)
		// 将查询字符串分割成数组
		let sURLVariables = sPageURL.split('&')
		// 定义变量用于存储参数名称
		let sParameterName
		// 循环遍历查询字符串中的每一项
		let i

		// 遍历查询字符串中的每一项
		for (i = 0; i < sURLVariables.length; i++) {
			// 分割每一项为参数名称和值
			sParameterName = sURLVariables[i].split('=');

			// 检查当前项的参数名称是否与指定的参数名称相匹配
			if (sParameterName[0] === sParam) {
				// 返回解码后的参数值
				return decodeURIComponent(sParameterName[1] === undefined ? true : sParameterName[1]);
			}
		}
		// 如果没有找到指定的参数，则返回 false
		return false;
	}
	// 用户名
	const user_name = ref(getUrlParameter('n'))
	// 用户头像
	const user_img = ref(getUrlParameter('t'))
	// ----------------------对象基本信息-----------------------
	// 音乐对象
	const music = ref({
		// 音乐 ID
		music_id: 0,
		// 音乐名称
		music_name: '',
		// 音乐文件名
		music_file: '',
		// 音乐歌词
		music_gc: '',
		// 音乐作者
		music_author: '',
		// 音乐类型
		music_type: 0,
		// 点赞数
		music_tu: 0,
		// 收藏数
		music_sc: 0,
		// 音乐地址
		music_url: '',
		// 音乐等级
		music_level: 0,
		// 音乐状态
		music_state: 0,
		// 音乐图片
		music_img: '',
		// 发布时间
		music_date: '',
		// 发帖时间
		music_time: '',
		// 用户名
		music_user_name: '',
		// 音乐热门状态
		music_rm: null,
		// 用户头像
		user_img: ''
	})
	// 获取音乐对象信息
	const getMusicInfo = () => {
		// 从地址栏获取音乐 ID
		music.value.music_id = getUrlParameter('m')
		axios({
			url: '/api/resource/message',
			method: 'get',
			params: {
				music_id: music.value.music_id
			}
		}).then(res => {
			// 绑定音乐对象信息
			music.value = res.data
			// 绑定收藏、点赞数
			bindControls()
			// 之后执行获取音乐信息函数
			getMusic()
		})
	}
	// ----------------------播放器控制-------------------------
	// 音乐播放器信息
	const audio = ref({
		// 作者
		artist: '',
		// 歌名
		name: '',
		// 歌曲(url)
		url: '',
		// 歌曲封面(url)
		cover: '',
		// 歌词(url)
		lrc: ''
	})
	// 音量信息
	const volume = ref()
	// 音乐下载链接
	const downloadUrl = ref('')
	// 获取歌曲信息
	const getMusic = () => {
		axios({
			url: '/api/resource',
			method: 'get',
			params: {
				filename: music.value.music_file,
				lrcname: music.value.music_gc,
				imgname: music.value.music_img
			}
		}).then(res => {
			// 绑定音乐播放器信息
			audio.value.artist = music.value.music_author
			audio.value.name = music.value.music_name
			audio.value.url = "/api" + res.data.music_url
			audio.value.cover = "/api" + res.data.music_img
			audio.value.lrc = "/api" + res.data.music_gc
			volume.value = 0.8
			// 拿到歌词文件
			lrcFile("/api" + res.data.music_gc)
		})
	}
	// ----------------------点赞、评论、收藏、下载(操作)控制------------------------
	// 操作信息
	const controls = ref({
		// 点赞
		like: 0,
		// 评论
		comment: "",
		// 收藏
		collection: 0,
		// 下载
		download: 0
	})
	// 绑定点赞、评论、收藏、下载(操作)数量函数
	const bindControls = () => {
		controls.value.like = music.value.music_tu
		controls.value.collection = music.value.music_sc
	}
	// 点赞操作符
	const likeIcon = ref(false)
	// 点赞操作函数
	const like = () => {
		likeIcon.value = !likeIcon.value
		controls.value.like += likeIcon.value ? 1 : -1
		// 保存数据
		save()
	}
	// 获取评论数量
	const account_comments = () => {
		axios({
			url: "/api/",
			method: "get",
			params: {

			}
		}).then(res => {
			controls.value.comment = res.data
		})
	}
	// 评论操作函数------------------------------------------
	//评论对象信息
	const comment = ref([{
		//评论 ID
		comments_id: 0,
		// 评论内容
		comments_main: '',
		// 评论时间
		comments_date: '',
		// 评论点赞数
		comments_tu: 0,
		// 评论用户名
		user_name: '',
		// 评论用户头像
		user_tx: '',
		//音乐 ID
		music_id: 0,
		// 评论用户 ID
		user_id: ''
	}]);
	//增加评论
	let comments = ref({
		// 音乐编号
		music_id: '',
		// 用户编号
		user_id: 0,
		// 评论主题
		comments_theme: '',
		// 评论内容
		comments_main: '',
		// 评论点赞数
		comments_tu: 0,
	});
	//获取评论信息
	const checkCom = () => {
		axios({
			url: '/api/comments/list1',
			method: 'GET',
			params: {
				music_id: music.value.music_id
			}
		}).then(response => {
			comment.value = response.data;


			// console.log(comment.value);
			checkUser();
		});
	}
	//获取评论所需的用户信息
	const checkUser = () => {

		for (let i = 0; i < comment.value.length; i++) {
			axios({
				url: '/api/users',
				method: 'GET',
				params: {
					user_id: comment.value[i].user_id
				}
			}).then(response => {
				//commentList.value[i] = response.data;
				Object.assign(comment.value[i], response.data);
				//console.log(comment.value[i]);
				comment.value[i].user_tx = "/api/src/images/" + comment.value[i].user_tx;
			});
		}
		controls.value.comment = comment.value.length;
		console.log(comment.value);
	}
	// 评论操作符
	const commentIcon = ref(false)
	//点赞
	const zan = () => {
		commentIcon.value = !commentIcon.value

	}
	//评论弹窗状态
	const getComment = ref(false);
	// 评论输入框
	const isShow = () => {
		// 判断用户登录
		if (user_id !== -1) {
			getComment.value = !getComment.value
		} else {
			ElMessage({
				message: '请先登录哦~',
				type: 'warning',
			})
		}
	}
	//提交评论
	const submit = () => {

		if (comments.value.comments_main === "" || comments.value.comments_main === null) {
			ElMessageBox.alert("评论内容空空如也哦~");
		} else {
			//添加用户ID和歌曲ID
			comments.value.user_id = user_id
			comments.value.music_id = music.value.music_id
			axios({
				url: '/api/comments',
				method: 'post',
				params: comments.value,
			}).then(response => {
				checkCom();
				zan();

				ElMessage({
					message: '评论成功！',
					type: 'success',
				})
				//提交后清空输入框
				comment.value.comments_main = "";
				getComment.value = !getComment.value;

			});
		}

	}
	// 收藏操作符
	const collectionIcon = ref(false)
	// 收藏操作函数
	const collection = () => {
		// 登录判断
		if (user_id !== -1) {
			// 收藏操作
			axios({
				url: "/api/collection",
				method: "post",
				params: {
					music_id: music.value.music_id,
					user_id: user_id
				}
			}).then(res => {
				collectionIcon.value = !collectionIcon.value
				controls.value.collection += collectionIcon.value ? 1 : -1
				// 保存数据
				save()
			})
		} else {
			ElMessage({
				message: '请先登录哦~',
				type: 'warning',
			})
		}
	}
	// 下载操作函数
	const download = () => {
		// 登录判断
		if (user_id !== -1) {
			// 文件资源链接
			const fileUrl = audio.value.url;

			// 创建一个隐藏的可下载链接
			const link = document.createElement('a');
			link.href = fileUrl;
			// 设置下载文件名
			link.setAttribute('download', music.value.music_file);
			link.style.display = 'none';
			document.body.appendChild(link);

			// 触发点击事件
			link.click();

			// 清理
			document.body.removeChild(link);
		} else {
			ElMessage({
				message: '请先登录哦~',
				type: 'warning',
			})
		}
	}
	// 数据保存函数
	const save = () => {
		// 存储点赞信息
		music.value.music_tu = controls.value.like
		// 存储收藏信息
		music.value.music_sc = controls.value.collection
		axios({
			url: "/api/music",
			method: "put",
			params: music.value
		})
	}
	// ----------------------歌词展示-------------------------
	// 创建歌词字符串
	const lrc = ref('')
	// 获取歌词文件
	const lrcFile = (str) => {
		axios.get(str).then(res => {
			// 解析lrc歌词文件为字符串(自动解析)
			lrc.value = res.data
			// 在lrc中的每一个"["字符前添加换行转义字符
			lrc.value = lrc.value.replace(/\[(\d{2}:\d{2}\.\d{3})\]/g, '\n').replace(/\[|\]/g, '')
		})
	}
	// ----------------------新增功能栏------------------------
	// 歌手信息查询
	const authorMessage = () => {
		window.open('https://www.baidu.com/s?wd=' + music.value.music_author)
	}
	// ----------------------启动加载项-------------------------
	onMounted(() => {
		// 获取音乐对象信息
		getMusicInfo()
		// 获取评论信息
		checkCom()

	})
	// ----------------------关闭后保存数据-------------------------
	onBeforeUnmount(() => {
		// 保存数据
		save()
	})
</script>

<style scoped>

</style>